/**
 * flex布局部分通用样式处理
 */
@mixin flex($alCenter:false, $jcCenter:false, $direction: row, $wrap: wrap) {
  display: flex;
  flex-direction: $direction;
  flex-wrap: $wrap;
  @if $alCenter {
    align-items: center;
  }
  @if $jcCenter {
    justify-content: center;
  }
}

.flex {
  @include flex();
}

.flexAlCenter {
  @include flex(true);
}

.flexJcCenter {
  @include flex('', true);
}

.flexCenter {
  @include flex(true, true);
}

/**
 * 通用溢出隐藏样式
 * 支持多行
 */
@mixin text-overflow($line: 1) {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;
  word-break: break-all;
}

.textOverflow {
  @include text-overflow(1);
}

/**
 * 通用三角样式
 * 目前仅支持 triangle-top、triangle-bottom、triangle-left、triangle-right
 */
$placement: (
  top: transparent transparent var(--triangle-color) transparent,
  bottom: var(--triangle-color) transparent transparent transparent,
  left: transparent var(--triangle-color) transparent transparent,
  right: transparent transparent transparent var(--triangle-color),
);

@mixin triangle($name, $borderColor, $width:10px, $color) {
  width: 0;
  height: 0;
  border-width: $width;
  border-style: solid;
  margin-#{$name}: -$width;
  border-color: $borderColor;
}
@each $name,$value in $placement {
  .triangle-#{$name} {
    @include triangle($name, $value, 10px, var(--triangle-color));
  }
}